<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>钱包管理</title>
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/nav.css">
    <link href="${applicationScope.basePath}/css/font-awesome.css" rel="stylesheet"/>
    <link href="${applicationScope.basePath}/css/myPage.css" rel="stylesheet"/>
    <script type="text/javascript" src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <style>
        table {
            width: 200px;
            table-layout: fixed; /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
        }

        td {
            width: 100%;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        }

        th {
            text-align: center;
        }
    </style>
</head>
<body>
<jsp:include page="header.jsp" flush="true"/>
<div class="row" style="height: 100%;margin-top: -21px;">
    <div class="col-xs-2" style="height: 100%;margin-left: 0;">
        <div class="nav nav-pills nav-stacked">
            <div class="nav-top">
                <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="${applicationScope.basePath}/images/mini.png"></div>
            </div>
            <ul>
                <li class="nav-item"><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/main"><i
                        class="icon icon-home"></i><span>首页</span></a></li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-group"></i><span>用户管理</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/userpage/1"><span>&emsp;&emsp;用户列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-signal"></i><span>商品管理</span> </a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/goodspage/1"><span>&emsp;&emsp;商品列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i class="icon icon-th"></i><span>订单管理</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/orderspage/1"><span>&emsp;&emsp;订单列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-inbox"></i><span>钱包管理</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/purse/page/1"><span>&emsp;&emsp;钱包列表</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/withdrawals/page/1"><span>&emsp;&emsp;提现列表</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/recharge/page/1"><span>&emsp;&emsp;充值列表</span></a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="javascript:;"><i
                            class="icon icon-fullscreen"></i><span>系统设置</span></a>
                    <ul>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/sys"><span>&emsp;&emsp;发布信息</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/password"><span>&emsp;&emsp;修改密码</span></a></li>
                        <li><a style="text-decoration: none;" href="${applicationScope.basePath}/admin/ipblack"><span>&emsp;&emsp;黑名单IP</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-10">
        <ol class="breadcrumb" style="margin-top: 15px;">
            <li><a href="#"><i class="icon-home"></i>首页</a></li>
            <li class="active">钱包列表</li>
        </ol>
        <div class="container">
            <!--搜索栏-->
            <form class="form-inline row" action="${applicationScope.basePath}/admin/purse/select/1" method="get">
                <div class="col-xs-5">
                    <div class="form-group">
                        <label for="email">用户邮箱：</label>
                        <input type="email" maxlength="20" class="form-control" id="email" name="email" value="${email}"
                               placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="myselected">钱包状态：</label><select class="form-control" name="status" id="myselected">
                            <option value="">请选择状态</option>
                            <option value="0">锁定</option>
                            <option value="1">正常</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-7">
                    <button class="btn btn-success btn-sm" type="submit">查找</button>
                </div>
            </form>
            <hr/>
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">钱包列表</div>
                <!--表格显示-->
                <table class="table table-bordered table-hover text-center">
                    <thead>
                    <tr>
                        <th style="width: 80px;">序号</th>
                        <th>用户邮箱</th>
                        <th>当前金额</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${info.list}" varStatus="vs" var="item">
                        <tr>
                            <td>${(info.pageNum > 0 ? info.pageNum - 1 : 0) * 10 + vs.count}</td>
                            <td>${item.email}</td>
                            <td>￥${item.balance}</td>
                            <td>
                                <c:if test="${item.status == 0}">
                                    <span class="btn-primary  btn-danger">锁定</span>
                                </c:if>
                                <c:if test="${item.status == 1}">
                                    <span class="btn-primary  btn-info">正常</span>
                                </c:if>
                            </td>
                            <td>
                                <button onclick="doUnLock(${item.id});" type="button" class="btn btn-primary btn-default">编辑</button>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
            <div style="text-align: right">
                <div class="pagination">
                    <ul>
                        <li class="active"><a>共${info.pages}页,${info.total}条记录</a></li>
                        <c:if test="${preSelect == null}">
                            <li><a
                                    href="${applicationScope.basePath}/admin/purse/page/${info.prePage > 1 ? info.prePage : 1}">上一页</a>
                            </li>
                        </c:if>
                        <c:if test="${preSelect != null}">
                            <li><a
                                    href="#" onclick="return selectBy(1);">上一页</a>
                            </li>
                        </c:if>
                        <li class="active"><a>第${info.pageNum <= 0 ? 1 : info.pageNum}页</a></li>
                        <c:if test="${preSelect == null}">
                            <li><a
                                    href="${applicationScope.basePath}/admin/purse/page/${info.nextPage == 0 ? info.pages : info.nextPage}">下一页</a>
                            </li>
                        </c:if>
                        <c:if test="${preSelect != null}">
                            <li><a onclick="return selectBy(2);"
                                   href="#">下一页</a>
                            </li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<br/>
<br/>
<div class="footerpanel">
    © 二手交易系统后台 2020
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLable">修改钱包信息</h4>
            </div>
            <div class="modal-body" style="">
                <form class="form-horizontal" id="myeditform" name="myform">
                    <input type="hidden" name="id" value="" />
                    <div class="form-group">
                        <label class="col-sm-4 control-label">账户余额:</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" name="balance" style="margin-top: 8px;" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">状态:</label>
                        <div class="col-sm-8">
                            <select id="purseStateSelect" name="status"
                                    style="margin-top: 8px; width: 372px; height: 27px;">
                                <option value="0">锁定</option>
                                <option value="1">正常</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="doLock();">提交更改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<script type="text/javascript" src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
<script type="text/javascript" src="${applicationScope.basePath}/js/nav.js"></script>
<script type="text/javascript">

    /*选择模板*/
    $(document).ready(function () {
        let status = "${status}";
        let $option = $("#myselected").children();
        for (let i = 0; i < $option.length; i++) {
            if ($option[i].value === status) {
                $($option[i]).attr("selected", true);
            } else {
                $($option[i]).attr("selected", false);
            }
        }
    });

    /*保存更改*/
    function doLock(){
        // 序列化表单值
        let data = JSON.stringify($("#myeditform").serializeJSON());
        $.ajax({
            url: '${applicationScope.basePath}/admin/purse',
            type: 'PUT',
            data: data,
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function (json) {
                if (json['flag']) {
                    alert("保存成功")
                }else{
                    alert("保存失败")
                }
                location.reload();
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#editModal').modal('hide');
            }
        });
    }


    function doUnLock(id){
        $.ajax({
            url: '${applicationScope.basePath}/admin/purse',
            type: 'GET',
            data: {id:id},
            dataType: 'json',
            contentType: "application/json;charset=UTF-8",
            success: function (json) {
                if (json) {
                    let $view = $('#myeditform');
                    $view.find("input[name='id']").val(json["id"]);
                    $view.find("input[name='balance']").val(json["balance"]);
                    if (json['status'] === 0) {
                        $view.find("#purseStateSelect option[value='0']").attr("selected",true);
                        $view.find("#purseStateSelect option[value='1']").attr("selected",false);
                    } else if(json['status'] === 1) {
                        $view.find("#purseStateSelect option[value='1']").attr('selected',true);
                        $view.find("#purseStateSelect option[value='0']").attr('selected',false);
                    }
                    // 切换模态
                    $('#editModal').modal('toggle');
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#editModal').modal('hide');
            }
        });
    }

    $(function () {
        /*清空模态框的数据*/
        $('#editModal').on('hidden.bs.modal', function () {
            $("#myeditform").reset();
        });
    });

</script>
</body>
</html>
